<template >



  <div class="Login">
    <div class="imgs"><img src="../../images/u18 (1).png" alt=""></div>
    <h3>诚成智业后台管理系统</h3>
    <el-form :model="user" label-width="60px">
      <el-form-item>
        <el-input v-model="user.username" placeholder="请输入用户名" style="height:40px;width: 250px;" />
      </el-form-item>
      <el-form-item>
        <el-input type="password" show-password v-model="user.password" placeholder="请输入密码"
          style="width:250px;height: 40px;" />
      </el-form-item>
      <el-form-item>
        <el-button @click="handleLogin" style="height:40px;width: 250px;" color="rgba(255, 153, 0, 1)"><span
            style="color:#fff;">登录</span></el-button>
      </el-form-item>
    </el-form>
  </div>

</template>

<script setup>
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
const router = useRouter()
const input = ref('')
const user = reactive({
  username: '',
  password: ''
})
const handleLogin = () => {
  if (user.username == 'admin' && user.password == 123456) {
    ElMessage({
      showClose: true,
      message: '登录成功',
      type: 'success'
    })
    localStorage.setItem('token', user.password) //登录成功保存token
    router.push('/home') //跳转到home

  } else {
    ElMessage({
      showClose: true,
      message: '用户名或者密码不正确',
      type: 'error'
    })
  }

}
</script>

<style lang="less" scoped>
.Login {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 350px;
  height: 420px;
  background: inherit;
  background-color: rgba(255, 255, 255, 1);
  border: none;
  border-radius: 10px;
  -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.349019607843137);
  -webkit-box-shadow: 0px 0px 10px rgb(0 0 0 / 35%);
  box-shadow: 0px 0px 10px rgb(0 0 0 / 35%);
  font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';
  font-weight: 700;
  font-style: normal;
  font-size: 16px;
  color: rgba(255, 153, 0, 1);
  text-align: left;
  line-height: 20px;
  display: flex;
  flex-direction: column;


  // align-items: center;
  h3 {
    font-size: 24px;
    font-weight: 900;
    margin-left: 60px;
  }

  .imgs {
    margin-left: 130px;
    margin-top: 20px;
    ;
    width: 90px;

    img {
      width: 100%;
    }
  }
}
</style>
